<!--
 * @Author: ningjz
 * @Date: 2022-04-11 18:05:46
 * @Description: 景区承载量 - 放大版
-->
<template>
  <div class="center-top-modal">
    <com-box :title="BarState.title" class="com-box-title">
      <loading v-show="BarState.params.loading" />
      <div class="nav" v-if="BarState.title">
        <div class="nav-warn">
          <div class="warn-line"></div>
          <div class="warn-text">70%预警线</div>
        </div>
        <div class="box-bar echart-item">
          <charts :params="BarState.params"></charts>
        </div>
      </div>
    </com-box>
  </div>
</template>

<script lang="ts">
import comBox from '@/components/comBox/comBox.vue'
import loading from '@/charts/loading.vue'
import { gradientColor } from '@/charts/utils'
import { defineComponent, reactive, onMounted } from 'vue'
import httpRequest from '@/service'

export default defineComponent({
  name: 'centerTopModal',
  components: {
    comBox,
    loading
  },
  setup() {
    //折线图
    const BarState: any = reactive({
      barWarn: {
        width: 0,
        left: 0
      },
      title: '',
      isGroup: false,
      params: {
        height: '379px',
        loading: false,
        forceRedraw: true, // 强制重绘
        map: {},
        custom: true, //自定义配置
        options: {
          dataset: {
            dimensions: [],
            source: []
          },
          legend: {
            data: [],
            show: true,
            right: 100 * 1.9,
            top: 8 * 1.9,
            itemWidth: 15 * 1.9,
            width: '70%',
            textStyle: {
              color: '#CBD1DA',
              fontSize: 14 * 1.9
            }
          },
          tooltip: {
            trigger: 'axis',
            show: true,
            axisPointer: {
              type: 'shadow'
            },
            backgroundColor: '#1959a7',
            borderColor: '#4beeff',
            borderWidth: 1,
            padding: 12 * 1.9,
            textStyle: {
              color: '#fff',
              fontSize: 14 * 1.9
            },
            formatter: (params: any) => {
              if (params) {
                let percent = ''
                let listTemp = '<li style="line-height:26px;display: block;">'
                for (let item of params) {
                  if (item.data.percent) {
                    percent = item.data.percent
                  }
                  let name = item.seriesName,
                    value = item.data[`value${item.seriesIndex + 1}`]
                  if (item.seriesIndex == 2) {
                    name = '占比'
                    value = percent
                  }
                  listTemp += `<span style="display: inline-block;width: 50%;text-align:left;font-size:16px;color:#e8effb;">${name} :</span>
                          <span style="display: inline-block;width: 50%;text-align:right;font-size:16px;font-family: 'AliHYAiHei';color:#00ffea;">${value}</span><br/>`
                }
                listTemp += '</li>'
                return `
                    <div style="width:200px;">
                      <div style="display: flex;justify-content: space-between;">
                        <p style="color: #ffc77a;font-size:22px;line-height:40px;font-family: 'AliHYAiHei'">${params[0].name}</p>
                      </div>
                      <ul>${listTemp}</ul>
                    </div>`
              }
            }
          },
          xAxis: {
            data: [],
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#A7B4C4',
                fontSize: 12 * 1.9
              }
            }
          },
          yAxis: {
            type: 'value',
            name: '',
            nameTextStyle: {
              align: 'left',
              color: '#46ede8',
              fontSize: 14 * 1.9,
              fontWeight: 'bold'
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#DCDCDC',
                fontSize: 12 * 1.9
              }
            }
          },
          grid: {
            top: 30 * 1.9,
            bottom: 49 * 1.9,
            left: 50 * 1.9,
            right: 30 * 1.9
          },
          dataZoom: [
            {
              show: true,
              type: 'slider',
              start: 0,
              end: 100,
              width: '96%',
              left: '3%',
              bottom: 7 * 1.9,
              height: 15 * 1.9,
              borderColor: '#166beb',
              handleStyle: {
                color: '#166beb',
                borderColor: '#166beb',
                borderWidth: 4
              },
              moveHandleSize: 10,
              moveHandleStyle: {
                color: '#166beb'
              },
              textStyle: {
                color: '#00c6ff',
                fontSize: 12 * 1.9
              },
              emphasis: {
                handleStyle: {
                  color: '#00c6ff',
                  borderColor: '#00c6ff',
                  borderWidth: 4
                },
                moveHandleStyle: {
                  color: '#00c6ff'
                }
              }
            }
          ],
          series: [
            {
              name: '',
              type: 'bar',
              data: [],
              barGap: '20%',
              label: {
                show: false
              },
              itemStyle: {
                color: gradientColor(['#0b3ee3', '#0aeadd'])
              },
              areaStyle: {
                opacity: 0
              }
            },
            {
              name: '',
              type: 'bar',
              data: [],
              label: {
                show: true,
                position: 'top',
                formatter: function (data: any) {
                  return data.data.percent
                },
                textStyle: {
                  color: '#D6DCE3',
                  fontSize: 15 * 1.9
                }
              },
              itemStyle: {
                color: gradientColor(['#efde1f', '#ea690a'])
              },
              areaStyle: {
                opacity: 0
              }
            },
            {
              data: [],
              type: 'pictorialBar', // 顶部
              symbolPosition: 'end',
              symbolOffset: ['-50%', '100%'],
              symbolSize: ['55%', 3],
              symbol: 'rect',
              color: '#FC5651', // Specify the color using rgb format
              zlevel: 2
            }
          ]
        }
      },
      getData: () => {
        BarState.params.loading = true
        httpRequest
          .get({ url: 'M2P3JqczBar', params: {} })
          .then((res) => {
            if (res.code === 200 && Object.keys(res.map).length > 0) {
              res.unit && (BarState.params.options.yAxis.name = res.unit)
              const mapKey = ['value1', 'value2'] //图例
              const legendData = [res.map[mapKey[0]], res.map[mapKey[1]]] //图例
              const legendColor: any = ['#0D7CFF', '#EBBC1E']
              BarState.params.options.legend.data = legendData.map(
                (item: any, index: number) => ({
                  name: item,
                  itemStyle: {
                    color: legendColor[index]
                  }
                })
              )
              const pictorialBarData: any = []
              const xAxisName: any = []
              const series: any = {
                value1: [],
                value2: []
              }
              res.data.forEach((item: any) => {
                xAxisName.push(item.name)
                series.value1.push({ ...item, value: item[mapKey[0]] })
                series.value2.push({ ...item, value: item[mapKey[1]] })
                pictorialBarData.push(Number(item[mapKey[0]]) * 0.7)
              })
              BarState.params.options.xAxis.data = xAxisName
              mapKey.forEach((key: any, index: number) => {
                BarState.params.options.series[index].name = res.map[key]
                BarState.params.options.series[index].data = series[key]
              })
              BarState.params.options.series[0].itemStyle.color = gradientColor(
                ['#0b3ee3', '#0aeadd']
              )
              BarState.params.options.series[1].itemStyle.color = gradientColor(
                ['#efde1f', '#ea690a']
              )
              BarState.params.options.series[2].data = pictorialBarData
              BarState.title = res.title
            }
            setTimeout(() => {
              BarState.params.loading = false
            })
          })
          .catch(() => {
            console.log('请求失败')
            setTimeout(() => {
              BarState.params.loading = false
            })
          })
      }
    })

    onMounted(() => {
      BarState.getData()
    })

    const refreshData = () => {
      BarState.getData()
    }

    return {
      BarState,
      refreshData
    }
  }
})
</script>

<style lang="less" scoped>
@MX: 1.9; // 放大倍数

.center-top-modal {
  width: 1300px;
  height: 583.5px;
  overflow: hidden;
  background-color: #001949;

  .com-box-title {
    width: 100%;
    height: 100%;

    ::v-deep(.com-header) {
      height: 45px * @MX;
    }

    ::v-deep(.title) {
      font-size: 20px * @MX;
      line-height: 45px * @MX;
      background-size: 264px * @MX 45px * @MX;
      flex: 0 0 264px * @MX;
    }

    ::v-deep(.com-content) {
      height: calc(100% - 45px * @MX);
      padding: 7px * @MX 10px * @MX;
    }
  }

  .nav {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 5px * @MX;
    position: relative;

    .nav-warn {
      position: absolute;
      top: 18px * @MX;
      right: 33px * @MX;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .warn-line {
        height: 1px;
        width: 20px * @MX;
        background-color: #a92a26;
        margin-right: 5px * @MX;
      }

      .warn-text {
        font-size: 13px * @MX;
        color: #cbd1da;
      }
    }

    .echart-item {
      width: 100%;
    }

    .box-bar {
      height: 100%;
      padding: 7px * @MX 30px * @MX 7px * @MX 15px * @MX;
    }
  }
}
</style>
